<!--
 * @Author: gyc
 * @Date: 2020-05-22 16:59:15
 * @LastEditTime: 2020-08-22 13:30:45
 * @Description: Nuxt测试版
--> 
<template>
  <div class="more-movie">
    <div class="more-movie-box">
      <Row class="more-movie-tag">
        <Col class="tag-box" :lg="{span:24}" :xs="{span:24}">
          <label>分类</label>
          <div class="more-movie-tag-item">
            <span>综艺</span>
            <span>日漫</span>
            <span>音乐</span>
            <span>动漫</span>
          </div>
        </Col>
      </Row>
      <div class="more-movie-main">
        <movie-item class="more-movie-main-item" :id="i" v-for="i in 28" :key="i"></movie-item>
        <div class="no-movie-box"></div>
      </div>
      <div class="more-movie-page">
        <Page :total="40" size="small" show-total />
      </div>
    </div>
  </div>
</template>
<script>
import movieItem from "@/components/movie/movieBox/movieBox";
export default {
  name: "moreMovie",
  layout: "dpage",
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    //图片懒加载
    // let _this = this;
    // var observer = new IntersectionObserver(function(changes) {
    //   changes.forEach(function(change) {
    //     var container = change.target;
    //     if (_this.list == []) {
    //       _this.list.push(change.intersectionRatio);
    //     } else {
    //       _this.list.splice(container.id - 1, 1, change.intersectionRatio);
    //     }
    //     if (change.intersectionRatio != 0) {
    //       observer.unobserve(container);
    //     }
    //   });
    // });
    // this.query(".more-movie-main-item").forEach(function(item) {
    //   observer.observe(item);
    // });
  },
  methods: {
    query(selector) {
      return Array.from(document.querySelectorAll(selector));
    },
  },
  components: { "movie-item": movieItem },
};
</script>>
<style lang="scss" scoped>
@media screen and (max-width: 768px) {
  .more-movie-box {
    width: 100%;
    padding: 5px;
    h3 {
      padding-left: 5px;
      margin-bottom: 10px;
    }
    .more-movie-main-item {
      width: 33.333333%;
    }
    .more-movie-tag {
      padding-left: 5px;
      .more-movie-tag-item {
        margin-bottom: 10px;
      }
    }
  }
}
@media screen and (max-width: 1106px) and (min-width: 768px) {
  .more-movie-box {
    width: 100%;
    padding: 5px;
    h3 {
      padding-left: 5px;
      margin-bottom: 10px;
    }
    .more-movie-main-item {
      width: 20%;
      margin-bottom: 20px;
    }
    .more-movie-tag {
      padding-left: 5px;
      .more-movie-tag-item {
        margin-bottom: 10px;
      }
    }
  }
}

@media screen and (min-width: 1106px) {
  .more-movie-box {
    width: 1106px;
    padding: 10px;
    h3 {
      padding-left: 10px;
      margin-bottom: 10px;
    }
    .more-movie-tag {
      padding-left: 10px;
      margin-bottom: 10px;
    }
  }
}
.tag-box {
  display: flex;
  justify-content: flex-start;
}
.more-movie-box {
  background-color: white;
  min-height: 600px;
  margin-top: 20px;
  margin-bottom: 20px;
  margin: 20px auto;
  h3 {
    margin-bottom: 20px;
  }
  .more-movie-tag {
    display: flex;
    margin-top: 5px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    label {
      background-color: black;
      color: white;
      font-size: 12px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding-left: 10px;
      padding-right: 10px;
      height: 20px;
      widows: 20%;
    }
    .more-movie-tag-item {
      display: flex;
      width: 70%;
      height: auto;
      white-space: pre-wrap;
      flex-wrap: wrap;
      align-content: flex-start;
      padding-left: 10px;
      padding-right: 10px;
      span {
        width: 40px;
      }
    }
  }
  .more-movie-main {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .no-movie-box {
      width: 100%;
      height: 0;
    }
  }
  .more-movie-page {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }
}
</style>